<template>
    <div class="vpubsub-son1">
        消息名msgName是：{{msgname}} <br>
        接收到的数据data是：{{msgdata}}<br>
    </div>
</template>

<script>
import pubsub from 'pubsub-js';

export default {
    name: 'VpubsubSon1',
    data() {
        return {
            msgname: '',
            msgdata: '',
        }
    },
    mounted() {
        // 订阅消息，接收数据。消息名msgName由订阅者决定
        // 但是要注意这里回调函数的写法，
        // 如果回调函数写作普通函数，那么回调函数里的this就不是指向vue的。
        // 如果回调函数写作箭头函数，那么回调函数里的this就是指向vue的。
        this.myPubsub = pubsub.subscribe('msgName', (msgName, data) => {
            this.msgname = msgName;
            this.msgdata = data;
        })
    },
    beforeDestroy() {
        // 取消订阅
        pubsub.unsubscribe(this.myPubsub);
    }
}
</script>

<style>

</style>